<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>


<link href="/css/twoColElsRtHdr.css" rel="stylesheet" type="text/css" />
<link type="text/css" rel="stylesheet" href="/css/main.css" />
        <script src = "../js/unittest.js"></script>
        <script src = "../js/rational.js">
        </script>
        <script src = "../js/piece.js">
        </script>
        <script src = "../js/connectedPiece.js">
        </script>
        <script src = "../js/stripe.js">
        </script>
        <script src = "../js/board.js">
        </script>
        <script src = "../js/render.js">
        </script>
        <script src = "../js/wz_jsgraphics.js">
        </script>
        <script src = "../js/jquery-1.3.2.min.js">
        </script>

        <script src = "../js/controller.js">
        </script>
        <script src = "../js/move.js">
        </script>
        <script src = "../js/game.js">
        </script>
        <script src = "../js/algorithm.js">
        </script>
        <script src = "../js/algCluster.js">
        </script>
        <script src = "../js/algDeep.js">
        </script>


        <script src = "../js/util.js">
        </script>
        <script src = "../js/chats.js">
        </script>
        <script src = "../js/json2.js">
        </script>
        <script src = "../js/remoteUser.js">
        </script>
        <script src = "../js/remotePlayer.js">
        </script>

        <script>
            var initialized = false;
            $(document).ready(function(){
                init();
            });

            function init() {
  
                if (initialized) {
                    return;
                }
                initialized = true;
                //testAll();
                var remotePlay = null;
  
                {% if table %}
                setupChat({{ table.table_number_str }});
                remotePlay = new RemotePlayer({{ table.table_number_str }});
                {% endif %}

                var controller = new Controller("board", remotePlay);
                controller.init();

                var h = $('#board').height();
                $('#moveHistory').height(h/2).css({"overflow-y":'auto'});

                $("#controlsLabel").bind("click", function(e){
                    $("#controls").toggle(); return false;
                });
                $("#controls").hide(); 
                $("#game_settings").bind("click", function(e){
                    $("#settings").toggle(); return false;
                });
                $("#settings").hide(); 
                $("#new_game").bind("click", function(e){
                    $("#new_game_settings").toggle(); return false;
                });
                $("#new_game_settings").hide(); 
               
            }

        </script>

</head>

<body class="twoColLiqRtHdr" onLoad = "init()">

<div id="container">
  <div id="sidebar1">
            <div id="game_info" class="UIsection">
   	            <div id = "playerColors" style="display:inline">
                	<span id="black"> Black </<span>
                	<span id="white" style="font:white"> White </<span>                   
                </div>
	            <div id = "material"> </div>
            </div>                
              <div id="game_settings" class="UIsection">
                <div id="game_settings_Label">+ Game settings </div>
                <div id="settings">
                    {% if not user %}
<!--                    <div><INPUT TYPE="checkbox" id="desiredBlack" CHECKED>I want to play black</INPUT></div>     -->                                 
                    <div><INPUT TYPE="checkbox" id="demo" UNCHECKED onClick="_controller.setDemo()">demo mode</INPUT></div>
                    <div><INPUT TYPE="checkbox" id="blackPlayerComp" UNCHECKED onClick="_controller.setBlackPlayerComp()">Computer plays Black (Easy)</INPUT></div>
                    <div><INPUT TYPE="checkbox" id="whitePlayerComp" UNCHECKED onClick="_controller.setWhitePlayerComp()">Computer plays White (Moderate)</INPUT></div>
                    {% endif %}
                </div>
            </div>

              <div id="new_game" class="UIsection">
                <div id="new_game_Label">+ New game </div>
                <div id="new_game_settings">
                    {% if user %}
<!--                    <div><button type="button" onClick="_controller.leaveTable()">Leave table</button></div> -->
                    <div><button type="button" id="newGameWhite" onClick="_controller.requestNewGame(WHITE)">New game as White</button></div>
                    <div><button type="button" id="newGameBlack" onClick="_controller.requestNewGame(BLACK)">New game as Black</button></div>
                    <div><INPUT TYPE="checkbox" id="desiredBlack" CHECKED style="visibility: hidden;"></INPUT></div>
                    {% endif %}
                    <div><button type="button" onClick="_controller.newGame(UNKNOWN)">New game</button></div>                    
                </div>
            </div>

  
      <div id="game_control" class="UIsection" >
        <div id="controlsLabel"> + controls: </div>
        <div id="controls">
            <ul>
                <li style="color:">Split: drag mouse in the direction of split </li>
                <li style="color:">Merge: Shift + Ctrl + drag mouse between two opposite pieces </li>
                <li style="color:">Swap: mouse click </li>
                <li style="color:">Pan: Shift + drag mouse </li>
                <li style="color:">Zoom: Ctrl + drag mouse </li>
                <li style="color:">Move history (p)revious/(n)ext </li>
            </ul>
        </div>

        <div class="panelT-1">
           <!-- <div><button type="button" onClick="_controller.snapView()">fit into window</button></div> -->
            <div id = "my_moveHistory" style="border:solid black">
            					<span style="font-size:12px;">Move History</span>
<!--                <div class="moveHistoryButton"><button  type="button" onClick="_controller.onMoveSelected(0)">-></button> </div> -->
                <div id = "moveHistory">
                </div>
            </div>
        </div>

        <div class="panelT-2">
            </div>            

            <div id="toBeRenamed" class="UIsection">
                <div id = "participants"> </div>
                {% if user %}
                <p>Table {{ table.table_number_str }}</p>
                <div>
                    <form action="javascript:sendChat();">
                        <div><input name="content" type="text" id="chattext" size="60"></input>
                            <input type="submit" value="Chat"></div>
                    </form>
                </div>
                <div id="chats" style="padding:10px;background-color:white;width:400px;height:80px; overflow:auto;">
                    {% endif %}
                </div>
            </div>
  <!-- end #sidebar1 --></div>
  <div id="mainContent">
    <div id="header">
              <div id = "whoseMove" style = "font-size:20px"> </div>
              <div id="moveControl" style = "margin-left:5%;" >
                <div><button type="button" style="width:70px;" onClick="_controller.undo()">Undo</button></div>              
                <div><button type="button" style="width:70px;" onClick="_controller.cancelMove()">Cancel</button></div>
                <div><button type="button" style="width:70px;" onClick="_controller.submitMove()">Done</button></div> 
			</div>
<!--        <div id = "gamelink" style="font-size:10pt!important;float:right;clear:both">
            <a href="http://sites.google.com/site/crumblegame/">What is Crumble?</a>
        </div> -->
        
  <!-- end #header --></div>
        <div class="panelT-3" >
            <div id = "boardContainer" style="float:left;">
                <div id="board"></div>
            </div>
        </div>
        	<div class="clearfloat" > </div>
  <div id="footer" type="clear:left">
            <div id="status" style="float:left">
                {% if not user %}
                <div><INPUT TYPE="checkbox" id="validator" CHECKED onClick="_controller.turnValidation()">turn on validation</INPUT></div>
                {% endif %}
                <div id = "message" style="color:red"></div>
            </div>
    	{% if user %}
        
        <div>Logged in as {{ user.nickname }} -
            <a href="/edituser/{{ user.email }}">Edit My Profile</a> -
            <a href="{{log_in_out_url}}">Log out</a> </div>
   	{% else %}
        <div id="loginMSG" style="float:right"><a href="{{log_in_out_url}}">Log in to play with other players</a></div>
        {% endif %}
                	<div class="clearfloat" > </div>
  <!-- end #footer --></div>

<!-- end #container --></div>
        
	<!-- end #mainContent --></div>
	<div class="clearfloat" />
</body>
</html>
